<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/index.css">
    <title>Document</title>
    <!-- 引入SockJS库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <!-- 引入stomp.js库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <!-- 导入jquery 库 -->
    <script src="/js/jquery-3.7.1.js"></script>
</head>
<body>
    <div id="box">
        <ul class="top">
            <li>
                <button>大厅</button>
            </li>
            <li>
                <button>私聊</button>
            </li>
            <li>
                <button>群聊</button>
            </li>
        </ul>
        <div class="bottom">
            <div class="leftListBox">
                <ul class="leftList">
                    <li>
                        <button>大厅</button>
                    </li>
                </ul>
            </div>
            <div class="rightContent">
                <div class="content">
                    <ul>
                        <li class="otherPeopleSay">
                            <div class="profilePhoto">

                            </div>
                            <div class="msg">
                                <div class="heiName">
                                    张雪峰
                                </div>
                                <div class="text">
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                </div>
                            </div>
                        </li>
                        <li class="me">
                            <div class="profilePhoto">

                            </div>
                            <div class="msg">
                                <div class="heiName">
                                    我
                                </div>
                                <div class="text">
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                    小张啊，吃了没有啊？
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="send">
                    <textarea></textarea>
                    <button>发送(send)</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/template" id="">

    </script>
    <script th:include="UserProfile::authenticateUser"></script>
    <script th:inline="javascript">
        $(function () {
            var socket = new SockJS('/ws');
            var stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                console.log('Connected: ' + frame);
                // 订阅主题以接收消息
                stompClient.subscribe('/topic/public', function(messageOutput) {
                    var message = JSON.parse(messageOutput.body);
                    // 在页面上显示接收到的消息
                    console.log(message);
                });
                // 发送消息到服务器
                var chatMessage = {"content": "Hello from client"};
                stompClient.send("/app/chat", {}, JSON.stringify(chatMessage));
            });
        })
    </script>
</body>
</html>